<template>
    <van-popup v-model:show="store.state.playListShow" position="bottom" round class="playList">
        <div class="content">
            <div class="contentTop">
                <div>
                    <span class="topTitle">当前播放</span>
                    <span class="topCount">({{ store.state.playList.length }})</span>
                </div>
                <van-icon name="delete-o" size="0.4rem" color="#999" @click="clearPlayList" />
            </div>
            <van-divider />
            <div class="contentList">
                <div v-for="(item, index) in store.state.playList" class="listItem" @click="playMusic(index)">
                    <van-icon name="music-o" v-show="index === store.state.playListIndex"
                        :class="[index === store.state.playListIndex ? 'item_active' : '']" />
                    <div class="item" :class="[index === store.state.playListIndex ? 'item_active' : '']">
                        <span class="itemName">{{ item.name }} </span>
                        <span class="itemAu">
                            <span v-for="i in item.ar"> <van-icon name="minus" /> {{ i.name }}</span>
                        </span>
                    </div>
                    <van-icon name="cross" color="#999" size="0.4rem" @click.stop="removeMusic(index)" />
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script lang='ts' setup>
import store from '@/store'
const playMusic = (index: number) => {
    store.commit('updatePlayListIndex', index)
}
const clearPlayList = () => {
    store.commit('clearPlayList')
    store.commit('updateSongDetailShow', false)
}
const removeMusic = (index: number) => {
    if (store.state.playList.length === 1) {
        clearPlayList()
    } else {
        store.commit('removePlayList', index)
    }

}
</script>
 
<style lang = "less" scoped>
.playList {

    .content {
        width: 100%;
        height: 50vh;
        padding-bottom: 0.2rem;

        .contentTop {
            padding: 0.3rem 0.3rem 0;
            font-weight: 700;
            display: flex;
            justify-content: space-between;

            .topTitle {
                font-size: 0.35rem;
            }

            .topCount {
                font-size: 0.2rem;
                color: #999;
            }
        }

        .contentList {
            padding: 0 0.3rem 0.2rem;

            .listItem {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.3rem;

                .item {
                    width: 80%;
                    display: flex;
                    align-items: center;

                    .itemName {
                        margin-right: 0.1rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }

                    .itemAu {
                        color: #999;
                        font-size: 0.2rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                }

                .item_active {
                    color: red;
                }


            }

        }
    }
}
</style>